import { Map, APILoader, Marker, GeolocationControl, Control } from "@uiw/react-baidu-map";
import { Point, getGravity } from '../MyMap/MyMap'
import { useState, useEffect } from 'react';
import { Button, Grid } from '@material-ui/core';
import "./Position.css";
import { PositionInfo, points as infoPoints } from "../Info/Info";
import { useHistory } from "react-router-dom";

function getFee(center: Point, selected: PositionInfo[]) {
    return selected.map(p => Math.hypot(p.point.lat - center.lat, p.point.lng - center.lng) * p.count * 5.0).reduce((a, b) => a + b, 0)
}

export function Position() {
    const [points, setPoints] = useState([] as PositionInfo[]);
    const [centerPoint, setCenterPoint] = useState(getGravity(infoPoints.map(x => x.point)) as Point);
    const [fee, setFee] = useState(1);
    const icon = new BMap.Icon('./star.png', new BMap.Size(16, 16));
    const [show, setShow] = useState(false)
    const addPoint = (point: PositionInfo) => {
        let p = [...points, point];
        setPoints(p);
        if (p.length >= 3) {
            const tPoint = getGravity(p.map(x => x.point))
            const tFee = getFee(tPoint, p);
            console.log(tFee);

            setFee(tFee)
            setCenterPoint(tPoint)

        }
        setShow(false)
    };
    const showCenterPoint = () => {
        if (points.length >= 3) {
            setShow(true)
        }
    }
    const history = useHistory();
    return (
        <div className="MyMap" style={{ position: 'relative' }}>
            <div style={{ position: 'absolute', zIndex: 40, left: '50%', right: '50%', padding: '12px' }}>
                <Button onClick={() => showCenterPoint()} color='primary' variant="contained">计算</Button>
            </div>
            <Grid item className='MyMap' style={{ position: 'absolute' }}>
                <APILoader akay="GzlPHk1eLYhZhLz6fs4ebQnNOPU9mzG6">
                    <Map enableMapClick={false} enableScrollWheelZoom center={(show || points.length === 0) ? centerPoint : undefined}>
                        <GeolocationControl />
                        {infoPoints.map((element, i) => <Marker key={i} onClick={() => addPoint(element)} title={element.title} position={element.point} icon={icon}></Marker>)}
                        {/* {centerPoint !== undefined && points.map((element, i) => {

                                return <Polyline
                                    key={i}
                                    path={[
                                        centerPoint,
                                        element
                                    ]}
                                ></Polyline>


                            })} */}
                        {points.map((element, i) => <Marker key={i} position={element.point} type="loc_red"></Marker>)}
                        {show && <Marker title={centerPoint.lat + "," + centerPoint.lng} position={centerPoint} animation={2}></Marker>}
                        <Control anchor={1}>
                            <div
                                style={{ minWidth: '220px', background: 'gray', padding: '10px', fontSize: 20, color: '#ffff', display: 'inline-block', opacity: '0.8', borderRadius: '10px' }}
                            >
                                {show && <div style={{ textAlign: 'center' }}>
                                    <div>{'位置: ' + centerPoint.lat.toFixed(6) + ',' + centerPoint.lng.toFixed(6)}</div>
                                    <div>{'费用: ' + fee.toFixed(2)}</div>

                                </div>

                                }
                            </div>
                        </Control>
                        <Control anchor={0}>
                            <Button variant="contained" color="secondary" onClick={() => history.goBack()}>←</Button>
                        </Control>
                    </Map>
                </APILoader>
            </Grid>
        </div>

    );
}